<template >
<!--  lang="pug"-->

<!--//.home-->
<!--    //.avatar-->
<!--    //.userName(v-if="getInfo") {{getInfo.userName}}-->
<!--    //ul(v-if="getInfo")-->
<!--    //    li 登录时间:-->
<!--    //    li {{$formatDate(getInfo.loginTime)}}-->
<!--    //    li 登录地点:-->
<!--    //    li {{getInfo.ipAddr}}-->
<!--    //    li 登录IP:-->
<!--    //    li {{getInfo.loginIp}}-->
<!--    //.table-->
<!--    //    el-progress(percentage=50)-->
<!--    //    el-table(data='tableData')-->
<!--    //        el-table-column(label="列1" prop="column1")-->
<!--    //        el-table-column(label="列2" prop="column2")-->
<!--    //        el-table-column(label="列3" prop="column3")-->

  <div class="home">
      <ul>
          <el-row :gutter="20">
              <el-col :span="5">
                  <el-input placeholder="身份证号模糊查询" v-model="search.idCard"></el-input>
              </el-col>
              <el-col :span="5">
                  <el-input placeholder="真实姓名模糊查询" v-model="search.name"></el-input>
              </el-col>
              <el-col :span="5">
                  <el-input placeholder="电话号码模糊查询" v-model="search.phone"></el-input>
              </el-col>
              <el-button size="large" type="primary" @click="searchuser">查询</el-button>
              <el-button size="large" type="danger" @click="deleteselectedusers">批量删除</el-button>
              <el-button size="large" type="primary" @click="showDialog">增加新用户</el-button>
              <el-dialog
                  title="新增用户"
                  :visible="dialogVisible"
                  @close="closeDialog"
                  :modal-append-to-body="false"
              >
                  <el-form :model="newUser" label-width="80px">
                      <!-- uid 字段 -->
                      <el-form-item label="身份证号">
                          <el-input v-model="newUser.uid" required></el-input>
                      </el-form-item>

                      <!-- loginName 字段 -->
                      <el-form-item label="用户名">
                          <el-input v-model="newUser.loginName" required></el-input>
                      </el-form-item>

                      <!-- password 字段 -->
                      <el-form-item label="密码">
                          <el-input v-model="newUser.password" required></el-input>
                      </el-form-item>

                      <!-- name 字段 -->
                      <el-form-item label="真实姓名">
                          <el-input v-model="newUser.name" required></el-input>
                      </el-form-item>

                      <!-- phone 字段 -->
                      <el-form-item label="电话号码">
                          <el-input v-model="newUser.phone" required></el-input>
                      </el-form-item>

                      <!-- 确认和取消按钮 -->
                      <el-form-item>
                          <el-button type="primary" @click="addNewUser">确认</el-button>
                          <el-button @click="closeDialog">取消</el-button>
                      </el-form-item>
                  </el-form>
              </el-dialog>
          </el-row>
      </ul>
      <ul>
      <el-table
          ref="multipleTable"
          :data="this.lists"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
                  prop="uid"
                  label="身份证号"
                  width="200">
          </el-table-column>
          <el-table-column
              prop="loginName"
              label="用户名"
              width="150">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="真实姓名"
                  width="150">
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="password"-->
<!--              label="密码"-->
<!--              width="200">-->
<!--          </el-table-column>-->
          <el-table-column
                  prop="phone"
                  label="手机号"
                  width="150">
          </el-table-column>
          <el-table-column
                  prop="modify"
                  label=""
                  width="150">
              <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="openEditDialog(scope.row)">编辑</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  <el-dialog :visible.sync="editDialogVisible" title="编辑数据"
                             :modal-append-to-body="false" >
                      <el-form :model="editForm" label-width="80px">
                          <el-form-item label="身份证号" >
                              <el-input v-model="editForm.uid" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="用户名">
                              <el-input v-model="editForm.loginName" required></el-input>
                          </el-form-item>
                          <el-form-item label="密码">
                              <el-input v-model="editForm.password" required></el-input>
                          </el-form-item>
                          <el-form-item label="真实姓名">
                              <el-input v-model="editForm.name" disabled></el-input>
                          </el-form-item>
                          <el-form-item label="手机号">
                              <el-input v-model="editForm.phone" required></el-input>
                          </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                          <el-button @click="closeEditDialog">取消</el-button>
                          <el-button type="primary" @click="saveData">保存</el-button>
                      </div>
                  </el-dialog>
              </template>
          </el-table-column>
      </el-table>
      </ul>
  </div>
</template>

<script>
import Vue from 'vue';
import { Table,TableColumn,Input,Col,Row } from 'element-ui';
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
import { mapGetters,mapActions, mapState } from 'vuex';
    export default {
        components: {

        },
        data () {
            return {
                multipleSelection: [],
                tableData: [{
                    id:45,
                    uid: '000000000000000000',
                    loginName: '肥睿',
                    password: '123456',
                    name: '吕睿',
                    phone: '13706510560'
                }],
                search: {
                    idCard: '',
                    name: '',
                    phone: ''
                },
                editDialogVisible: false,
                editForm: {
                    id:'',
                    uid: '',
                    loginName: '',
                    password: '',
                    name: '',
                    phone: ''
                },
                dialogVisible: false, // 控制弹窗的显示与隐藏
                newUser: {
                    id:'',
                    uid: '',
                    loginName: '',
                    password: '',
                    name: '',
                    phone: '',
                },
            }
        },
        mounted(){
            this.refreshlist()
        },
        computed: {
            ...mapState(['lists'])
        },
        methods:{
            ...mapActions(['fetchLists','modifyUser','addUser','deleteUser']),
            deleteselectedusers() {
                const id = this.multipleSelection.map(item => item.id);
                console.log('id',id)
                this.deleteUser(id);
                this.refreshlist()
            },
            searchuser() {

            },
            refreshlist() {
                console.log('refreshlist')
                this.fetchLists(this.editForm)
            },
            handleDelete(index, row) {
                console.log(index, row);
                const id = []
                id.push(row.id)
                console.log('id',id)
                this.deleteUser(id);
                this.refreshlist()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log('val',val)
            },
            openEditDialog(row) {
                // 打开编辑弹窗时，将当前行的数据填充到编辑表单中
                this.editForm = {
                    id:row.id,
                    uid: row.uid,
                    loginName: row.loginName,
                    password: row.password,
                    name: row.name,
                    phone: row.phone
                };
                this.editDialogVisible = true;
            },
            closeEditDialog() {
                // 关闭编辑弹窗
                this.editDialogVisible = false;
            },
            saveData() {
                // 在这里处理保存数据的逻辑，可以将编辑后的数据提交到后端等操作
                // 保存完成后，关闭编辑弹窗
                console.log('editForm',this.editForm)
                this.modifyUser(this.editForm)
                this.editDialogVisible = false;
                this.refreshlist()
            },
            showDialog() {
                // 打开弹窗
                this.dialogVisible = true;
            },
            closeDialog() {
                // 关闭弹窗
                this.dialogVisible = false;
                // 清空表单数据
                this.newUser = {
                    uid: '',
                    loginName: '',
                    password: '',
                    name: '',
                    phone: '',
                };
            },
            addNewUser() {
                // 在这里执行添加新用户的逻辑
                // 可以将 this.newUser 发送到后端保存
                // 成功后关闭弹窗并清空表单数据
                this.addUser(this.newUser)
                this.closeDialog();
                this.refreshlist()
            },
        }
    }
</script>

<style lang="stylus" scoped>
    ul
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 10px;
        margin-top 4px
        margin-bottom 4px
        li
            float: left;
            width: 50%;
            color: #555;
            margin: 7px 0;
            &:nth-child(even)
                width 20%

</style>
